<template>
  <div>
    <!--文创&#45;&#45;投票活动&#45;&#45;详情页-->
    <content-header :title="detail.title"></content-header>
    <div class="vote-detail-header xui-margin-vertical-md">
      <img-box :imgSrc="detail.imgUrl" width="930" height="320"></img-box>
      <span class="voting-mark" :class="voteState"></span>
      <span class="voting-mark isVoted" v-if="detail.isVote == 'Y'">已投票</span>
      <div class="header-content xui-margin-top-lg">
        <div class="title-content">
          <h3 class="xui-text-truncate">{{detail.title}}</h3>
        </div>
        <p class="xui-margin-bottom-lg xui-margin-top-sm" v-html="detail.content">
        </p>
      </div>
    </div>

    <!--投票列表-->
    <div class="list-wrap xui-margin-vertical-md xui-grid-avg-3">
      <div v-for="(item, index) in listData" :key="index" class="list xui-margin-bottom-md" >
        <img-box width="300" height="205" :imgSrc="item.imgUrl"></img-box>
        <div v-if="item.isVote == 'Y'" class="voting-mark isVoted">
          <span class="">已投票</span>
        </div>

        <div class="list__info">
          <div>
            <p class="xui-text-truncate xui-padding-horizontal-md xui-margin-bottom color-white">【 {{ item.name }} 】</p>
            <p class="color-white xui-margin-bottom">得票:{{item.number}}</p>
            <button v-if="!userId" @click="$store.dispatch('ToggleNeedLogin',true)">登录后投票</button>
            <div v-else>
              <button @click="showItemDetail(item.id)" v-if="isVoting && isVote === 'N' && item.isVote == 'N'">马上投票</button>
              <button @click="showItemDetail(item.id)" v-else>查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.count"
      :page-size="page.size"
      class="xui-margin-top xui-text-center"
      @current-change="getItems"
      :current-page.sync="page.index">
    </el-pagination>

    <!--作品详情弹出框-->
    <el-dialog
      title="作品详情"
      :visible.sync="dialogVisible"
      width="600px"
      >
      <div class="dialog-header-content xui-padding-bottom-xl">
        <img-box :imgSrc="itemDetail.imgUrl" width="540" height="334"></img-box>
        <div class="title xui-margin-top-sm xui-fc">
          <span class="xui-fl">【作品名称】</span>
          <p class="xui-text-truncate xui-fl xui-font-size-md">{{itemDetail.name}}</p>
        </div>
        <div class="info xui-fc">
          <span class="xui-fl">【作品简介】</span>
          <p class="bodyFont xui-fl" ref="bodyFont" :class="{bodyHeight:isActive}">
            {{itemDetail.content}}
          </p>
        </div>
        <div class="info xui-fc">
          <span class="xui-fl">【作品分享】</span>
          <share :title="itemDetail.name"></share>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary" v-if="isVoting && isVote === 'N'" @click="vote(itemDetail.id)" v-loading="voteLoading">投ta一票</el-button>
        <!-- <el-button type="primary" plain>分享</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContentHeader from "../../../components/widge/content-header";
import defaultImg from "@/assets/images/default.png";
import imgBox from "@/components/widge/img-box";
import share from "@/components/widge/share";
import {
  getVoteList,
  getVoteDetail,
  getVoteItems,
  getVoteItemDetail,
  vote
} from "@/api/vote";
import { addBrowseNum } from "@/api/detail";

export default {
  components: {
    ContentHeader,
    imgBox,
    share
  },
  data() {
    return {
      defaultImg,
      dialogVisible: false,
      isActive: false,
      voteLoading: false,
      isVote: "",
      detail: {
        title: "加载中...",
        content: "加载中...",
        imgUrl: defaultImg,
        stStartTime: "",
        stEndTime: ""
      },
      itemDetail: {
        name: "",
        content: "",
        isVote: ""
      },
      listData: [],
      page: {
        count: null,
        size: 12,
        index: 1
      }
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
    isVoting() {
      // 正在投票
      var curTime = Date.parse(new Date());
      var startTime = Number(this.detail.startTime);
      var endTime = Number(this.detail.endTime);
      console.log(curTime, startTime, endTime);
      return curTime >= startTime && curTime <= endTime;
    },
    voteState() {
      var curTime = new Date();
      var startTime = new Date(this.detail.stStartTime);
      var endTime = new Date(this.detail.stEndTime);
      if (curTime < startTime) {
        return "waiting";
      } else if (curTime >= startTime && curTime <= endTime) {
        return "voting";
      } else if (curTime > endTime) {
        return "end";
      }
    },
    userId() {
      return this.$store.getters.userId;
    }
  },
  methods: {
    getItems() {
      let userId = this.$store.getters.userId;
      getVoteItems(this.id, userId, this.page.index).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
        this.isVote = res.data.isVote;
      });
    },
    showItemDetail(id) {
      let userId = this.$store.getters.userId;
      getVoteItemDetail(id, userId).then(res => {
        this.itemDetail = res.data;
      });
      this.dialogVisible = true;
    },
    vote(itemId) {
      this.voteLoading = true;
      let userId = this.$store.getters.userId;

      vote(itemId, userId, this.id).then(res => {
        if (res.flag == 1 && res.msg == "投票成功") {
          let thisItem = this.listData.find(item => {
            return item.id === itemId;
          });
          thisItem.isVote = "Y";
          thisItem.number += 1;
          this.isVote = "Y";
          this.itemDetail.isVote = "Y";
          this.$message({
            showClose: true,
            type: "success",
            message: res.msg
          });
        } else {
          this.$message({
            showClose: true,
            type: "warning",
            message: res.msg
          });
        }
        this.voteLoading = false;
      });
    }
  },
  mounted() {
    getVoteDetail(this.id).then(res => {
      this.detail = res.data;
      this.getItems();
    });
    addBrowseNum(this.id, "7");
  },
  watch: {
    userId: function() {
      getVoteDetail(this.id).then(res => {
        this.detail = res.data;
        this.getItems();
      });
    }
  }
};
</script>

<style lang="less" scoped>
.voting-mark {
  position: absolute;
  top: 20px;
  width: 140px;
  height: 100px;
  display: block;
  background: url("../../../assets/images/Winchance/voting.png") no-repeat left
    top;
}
.voting-mark.end {
  background-position-y: -100px;
}
.voting-mark.waiting {
  background-position-y: -200px;
}
.voting-mark.isVoted {
  top: 20px;
  right: 20px;

  width: 100px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: #bf9c51;
  color: #fff;
  text-align: center;
}
.vote-detail-header {
  border-bottom: 1px solid #bf9c51;
  position: relative;
  .header-content {
    position: relative;
    .title-content {
      background: url("../../../assets/images/Winchance/title_bg.png") left top
        no-repeat;
      height: 27px;
      padding-left: 20px;
    }
    h3 {
      background: url("../../../assets/images/Winchance/title_bg.png") no-repeat
        right bottom;
      font-weight: normal;
      height: 27px;
      line-height: 27px;
      padding-right: 20px;
      display: inline-block;
      max-width: 100%;
    }
    p {
      font-size: 14px;
      line-height: 30px;
    }
    .all-text {
      cursor:pointer;
      span {
        font-size: 14px;
        color: #dbad23;
      }
      i {
        color: #bf9c51;
      }
    }
    .btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

.list-wrap {
  .list {
    position: relative;
    width: 300px;
    height: 205px;
    margin-right: 15px;
    .isVote-mask {
      position: absolute;
    }
  }
  .list:nth-child(3n) {
    margin-right: 0;
  }
  .list__info {
    display: none;
    span {
      display: block;
      line-height: 48px;
      height: 48px;
      font-size: 14px;
      text-align: center;
      color: #fff;
      margin-bottom: 30px;
    }
    button {
      display: inline-block;
      color: #fff;
      padding: 10px 40px;
      background-color: #c09c52;
      border: none;
      cursor: pointer;
    }
    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .list:hover .list__info {
    background-color: rgba(42, 42, 43, 0.5);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
  }
}
.el-dialog {
  .dialog-header-content {
    position: relative;
    .title span,
    .info span {
      display: block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      color: #b2914f;
    }
    p {
      font-size: 14px;
      line-height: 30px;
      color: #333;
      width: 80%;
    }
  }
  .footer {
    text-align: center;
    .el-button {
      display: inline-block;
    }
    .is-plain {
      color: #b59551;
      background: rgb(255, 255, 255);
      border-color: rgb(225, 213, 185);
      padding: 12px 62px;
    }
  }
}
</style>
